<script lang="ts" setup>
    import {ref , reactive} from 'vue'
    
    let arrayFns = reactive([
        {fnName : 'concat' , remark : '连接两个或更多的数组，并返回结果。' , code : `let arr =[1,2,3]; <br> return arr.concat([4,],[5,6]);`},
        {fnName : 'copyWithin' , remark : '从数组的指定位置拷贝元素到数组的另一个指定位置中。' , code : `let arr = [1,2,3,4] ; <br> arr.copyWithin(0,arr.length - 1); <br> return arr`},
        {fnName : 'entries' , remark : '返回数组的可迭代对象。' , code : `let arr = [1,2,3];<br> let e = arr.entries(); return e`},
        {fnName : 'every' , remark : '检测数值元素的每个元素是否都符合条件。' , code : `let arr = [1,2,3,4]; <br> let flg = arr.every(item=> item > 0) ; <br> return flg ? '每个数都大于0' : '有小于0的'`},
        {fnName : 'fill' , remark : '使用一个固定值来填充数组。' , code : `let arr = Array.from({length:3}).fill(4);<br> return arr;`},
        {fnName : 'filter' , remark : '检测数值元素，并返回符合条件所有元素的数组。' , code : `let arr =[1,2,3,4,5];<br> let fItems = arr.filter(item => item % 2 !== 0); <br> return fItems;`},
        {fnName : 'find' , remark : '返回符合传入测试（函数）条件的数组元素。' , code : `let arr =[1,2,3,4,5];<br> let fItem = arr.filter(item => item % 2 !== 0); <br> return fItem;`},
        {fnName : 'findIndex' , remark : '返回符合传入测试（函数）条件的数组元素索引。' , code : `let arr =[1,2,3,4,5];<br> let index = arr.findIndex(item => item % 2 !== 0); <br> return 'index:'+index;`},
        {fnName : 'forEach' , remark : '数组每个元素都执行一次回调函数。' , code : `let arr = [1,2,3,4]; <br> let _arr = [] ; arr.forEach(item=>{ _arr.push(item*2) }) ; <br> return _arr ;`},
        {fnName : 'from' , remark : '通过给定的对象中创建一个数组。' , code : `let arr = Array.from({length:2}); <br> return arr.length ;`},
        {fnName : 'includes' , remark : '判断一个数组是否包含一个指定的值。' , code : `return [1,2,3,4].includes(5) ? '有' :'无' `},
        {fnName : 'indexOf' , remark : '搜索数组中的元素，并返回它所在的位置。' , code : `let index = [1,2,3,4].indexOf(5); <br> return index >=0  ? index :'无' `},
        {fnName : 'isArray' , remark : '判断对象是否为数组。' , code : `let arr = [1,2]; <br> return Array.isArray(arr) ? '数组' :'非数组'`},
        {fnName : 'join' , remark : '把数组的所有元素放入一个字符串。' , code : `let arr =[1,2,3]; <br> return arr.join('')`},
        {fnName : 'keys' , remark : '返回数组的可迭代对象，包含原始数组的键(key)。' , code : `let arr=[1,2,3]; <br> let keys = arr.keys() ; <br> return keys;`},
        {fnName : 'lastIndexOf' , remark : '搜索数组中的元素，并返回它最后出现的位置。' , code : `let index = [1,2,3,4].lastIndexOf(3); <br> return index >=0  ? index :'无' `},
        {fnName : 'map' , remark : '通过指定函数处理数组的每个元素，并返回处理后的数组。' , code : `let arr = [1,2,3,4]; <br> let _arr = arr.map(item=>item*2) ; <br> return _arr ;`},
        {fnName : 'pop' , remark : '删除数组的最后一个元素并返回删除的元素。' , code : `let arr=[1,2,3];<br> let pop = arr.pop() ; <br> return pop;`},
        {fnName : 'push' , remark : '向数组的末尾添加一个或更多元素，并返回新的长度。' , code : `let arr=[1,2,3];<br> arr.push(4) ; <br> return arr;`},
        {fnName : 'reduce' , remark : '将数组元素计算为一个值（从左到右）。' , code : `let arr = [1,2,3,4];<br> let total = arr.reduce((t,n,i,o)=>{return t + n},0); <br> return total ;`},
        {fnName : 'reduceRight' , remark : '将数组元素计算为一个值（从右到左）。' , code : `let arr = [1,2,3,4];<br> let total = arr.reduceRight((t,n,i,o)=>{return t + (i > 1 ? n : 0)},0); <br> return total ;`},
        {fnName : 'reverse' , remark : '反转数组的元素顺序。' , code : `let arr = [1,2,3,4];<br>  return arr.reverse() ;`},
        {fnName : 'shift' , remark : '删除并返回数组的第一个元素。' , code : `let arr=[1,2,3];<br> let sh = arr.shift() ; <br> return sh;`},
        {fnName : 'slice' , remark : '选取数组的一部分，并返回一个新数组。' , code : `let arr = [1,2,3,4,5];<br> return arr.slice(0,3)`},
        {fnName : 'some' , remark : '检测数组元素中是否有元素符合指定条件。' , code : `let arr = [1,2,3,4,5]; <br> let flg = arr.some(item => item > 10); <br> return flg ? '有超过10的数字' :'没有超过10的数字'`},
        {fnName : 'sort' , remark : '对数组的元素进行排序。' , code : `let arr = [213,3,12,4,120,56,142];<br> let _arr = arr.sort() ; <br> return _arr;`},
        {fnName : 'splice' , remark : '从数组中添加或删除元素。' , code : `let arr = [1,2,3,4,5]; <br> let _arr = arr.splice(0,0,0); <br> return _arr;`},
        {fnName : 'toString' , remark : '把数组转换为字符串，并返回结果。' , code : `let arr = [1,2,3,4,5];<br> return arr.toString() `},
        {fnName : 'unshift' , remark : '向数组的开头添加一个或更多元素，并返回新的长度。' , code : `let arr = [1,2,3,4,5]; <br> let _arr = arr.unshift(0,-1); <br> return _arr;`},
        {fnName : 'valueOf' , remark : '返回数组对象的原始值。' , code : `let arr = [1,2,3,4,5];<br> return arr.valueOf()`},
        {fnName : 'Array.of' , remark : '将一组值转换为数组。' , code : `let arr = Array.of(0,1,2);<br> return arr`},
        {fnName : 'Array.at' , remark : '用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。' , code : `let arr = [1,2,3,4,5];<br> return arr.at(0)`},
        {fnName : 'Array.flat' , remark : '创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。' , code : `let arr = [1,[2,3,[4,5,6]]]; <br> let flatArr = arr.flat(3);<br> return flatArr;`},
        {fnName : 'Array.flatMap' , remark : '使用映射函数映射每个元素，然后将结果压缩成一个新数组。' , code : `let arr = [1,[2,3,[4,5,6]]];<br> let _arr = arr.flatMap((currentValue,index,array) => current) ; <br> return _arr ;`},
        {fnName : '' , remark : '' , code : ``},
        {fnName : '' , remark : '' , code : ``},
        {fnName : '' , remark : '' , code : ``},
        {fnName : '' , remark : '' , code : ``},
        {fnName : '' , remark : '' , code : ``},
        {fnName : '' , remark : '' , code : ``},
    ])
   
    const onHandler = item => {
        let code = item.code.replace(/<[a-zA-Z]{1,}>/g,'')
        console.log(45,code)
        let result = new Function(''+code)()
        // let result = eval(code)
        console.log(47,result)
        if(result.toString() === '[object Array Iterator]') {
            let done = result.next().done 
            console.log(55,done)
            
        }
        item.result = result

        setTimeout(()=>{
            item.result = null 
        },6e4)
    }
    


</script>


<template>
    <section>
        <h4> string prototype </h4>
        <ul>
            <li v-for="item in arrayFns" key="item.fnName">
                <div class="flex flex-dir-c" v-if="item.fnName"    >
                    <div class="flex "> 
                        <p> {{ item.fnName }} : </p>
                        <p> {{ item.remark }}</p>
                    </div>
                    <DIV class="code flex">
                        <code v-html="item.code"> </code>
                        <div class="run">
                            <button v-if="!item.result" @click="()=>onHandler(item)">执行</button>
                            <span v-else style="color:red">{{ item.result }}</span>
                        </div>
                    </DIV>
                </div>
            </li>
        </ul>
        
        <div>
        在JavaScript中，以下几种情况会被判断为false：
        <p>布尔值‌：false。</p>   
        <p>数字‌:0。</p>
        <p>‌空字符串‌：''。 </p>
        <p>‌null‌。</p>    
        <p>‌undefined‌。</p>
        <p>‌NaN‌（非数值）。</p>    
        <p>‌空对象或空数组‌：虽然空对象和空数组在逻辑上可能看起来像是false，但实际上它们在JavaScript中被视为true。
        需要注意的是，字符串"false"在JavaScript中被视为true，因为它是一个字符串而不是布尔值。</p>
        
        </div>
    </section>
</template>